﻿@model QuanLyCayXanh.Models.Address

@{
    ViewBag.Title = "Create";
}

<h2>Thêm mới địa chỉ</h2>

@using (Html.BeginForm("Create","Address",FormMethod.Post, new { @class = "pure-form pure-form-aligned" }))
{
    @Html.AntiForgeryToken()    

    <fieldset>
        <legend>Address</legend>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Name)
            @Html.TextBoxFor(model => model.Name, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="pure-control-group">
            @Html.Label("Tên Quận")
            @Html.DropDownList("District_Id", null, "Chọn tên quận/huyện", new { @class = "pure-input-1-3" })
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Ward_Id, "Tên Phường")
            <div id="select-ward" class="pure-u-1-3">@Html.Partial("_SelectWard")</div>
            @Html.ValidationMessageFor(model => model.Ward_Id)
        </div>
              
        <div class="pure-control-group">
            @Html.LabelFor(model => model.Street_Id, "Tên Đường")
            @Html.DropDownListFor(model => model.Street_Id, (SelectList)ViewBag.GroupOfTree_Id, "Chọn tên đường", new { @class = "pure-input-1-3" })
            @Html.ValidationMessageFor(model => model.Street_Id)
        </div>
        <div class="pure-controls">
            <input type="submit" value="Create" class="pure-button pure-button-primary" />
            @Html.ActionLink("Quay lại danh sách", "Index", null, new { @class = "pure-button" })
        </div>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    $(function () {       
        $("#District_Id").change(function () { 
            $.ajax({
                url: '@Url.Action("_GetSelectWard")',
                data: { District_Id: $("#District_Id").val() },
                type: 'POST',
                success: function (data) {
                    $("#select-ward").html(data);
                }
            });
        })
    });
</script>